Within-Page Links

When we jump to a different site, we provide its full pathname in the href. When we jump to a different page on our own site, we provide its relative pathname. In either case, the place we’re linking to has an id.

When we want to link from one part of a page to another (for example, to section two of this page), we have a problem. Other people’s sites have names. Our own files have names. The line at the beginning of section two in our file isn’t a file itself; it doesn’t have a name.

We will have to find some way to give that anonymous line a name so that we can link to it. We use the <a> element to establish an anchor on that line for us to link to. The easiest way to do a line of this form just before the line you want as your anchor point:

<a id="name_of_line"></a>

Use a short but meaningful name, and use only letters and digits and underscore characters. The name must begin with a letter. As an example, here’s the tag we used for section two of this very page:

<a id="section2"></a>

Notice that there’s no text between the opening and closing <a> tags. That’s OK in this case; you’re not activating the text, you’re anchoring it by giving it a name.

Section Two - Linking to a Named Anchor

Now that you’ve established an anchor, the line has a name (given by the id, and you can link to it. Do it like this:

<a href="#section2">Go to Section 2</a>

Notice that this is an href, since you’re activating text for a link. You tell the browser that you’re referring to an anchor rather than a file by starting with a pound sign (which we’ve put in red for emphasis), followed by the name of the anchor you want to link to. The anchor is case sensitive, by the way, so if you had written href="#Section2" it wouldn’t have worked.

One other note: Nature abhors a vacuum, and so does a browser. Unless you pull some sneaky tricks, you will never see blank space at the end of a web page. When you link to an anchor, that anchor comes as close as it can to the top of the screen without leaving any blank space at the bottom.

In summary, jumping within a page is a two-stage process: